<template>

  <el-dialog :title="id ? '规则参数修改' : '规则参数添加'" :visible.sync="dialogVisible" width="35%" :close-on-click-modal="false">

    <el-form ref="main-form" :model="form" :rules="rules" label-width="120px" >
      <el-form-item label="类型" size="mini" prop="blackType">
        <el-select v-model="form.type" placeholder="未选择" clearable>
          <el-option
            v-for="item in paramTypeOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="参数名称" size="mini" prop="paramName">
        <el-select v-model="form.paramName" placeholder="未选择">
          <el-option
            v-for="item in paramNameOptions"
            :label="item.value + item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="参数显示名称" size="mini" prop="paramDisplayName">
        <el-input placeholder="" v-model="form.paramDisplayName" @keyup.enter.native="submit" clearable></el-input>
      </el-form-item>
      <el-form-item label="参数值" size="mini" prop="paramValue" v-if="form.type == 1 || form.type == 2">
        <el-input placeholder="list类型时，多个用英文逗号分隔" v-model="form.paramValue" @keyup.enter.native="submit" clearable></el-input>
      </el-form-item>
      <el-form-item label="存储列名1" size="mini" prop="paramCustomCol1" v-if="form.type == 3 || form.type == 4">
        <el-select v-model="form.paramCustomCol1" placeholder="未选择">
          <el-option
            v-for="item in customColOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="存储值1" size="mini" prop="paramCustomVal1" v-if="form.type == 3 || form.type == 4">
        <el-input placeholder="时间长度，5分钟填5" v-model="form.paramCustomVal1" @keyup.enter.native="submit" clearable style="width: 180px"></el-input>
        <el-input placeholder="限制次数" v-model="form.paramCustomCount1" @keyup.enter.native="submit" clearable style="width: 100px"></el-input>
      </el-form-item>
      <el-form-item label="存储列名2" size="mini" prop="paramCustomCol2" v-if="form.type == 3 || form.type == 4">
        <el-select v-model="form.paramCustomCol2" placeholder="未选择">
          <el-option
            v-for="item in customColOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="存储值2" size="mini" prop="paramCustomVal2" v-if="form.type == 3 || form.type == 4">
        <el-input placeholder="时间长度，5分钟填5" v-model="form.paramCustomVal2" @keyup.enter.native="submit" clearable style="width: 180px"></el-input>
        <el-input placeholder="限制次数" v-model="form.paramCustomCount2" @keyup.enter.native="submit" clearable style="width: 100px"></el-input>
      </el-form-item>
    </el-form>

    <div slot="footer" class="dialog-footer">
      <el-popover
        v-if="id != null"
        placement="top"
        width="160"
        v-model="popDeleteVisible">
        <p>确定删除吗？</p>
        <div style="text-align: right; margin: 0">
          <el-button size="mini" type="default" @click="popDeleteVisible = false">取消</el-button>
          <el-button type="danger" size="mini" @click="submitDel">确定</el-button>
        </div>
        <el-button type="danger" slot="reference"  size="small" style="float: left;" :loading="loading">删 除</el-button>
      </el-popover>

      <el-button @click="close" size="small">取 消</el-button>
      <el-button type="primary" @click="submit" size="small" :loading="loading">提 交</el-button>
    </div>

  </el-dialog>
</template>

<script>

import ApiMain from '@/api/risk.param';

export default {
  mixins: [
  ],
  props: [
  ],
  data () {
    return {

      dialogVisible: false,
      popDeleteVisible: false,
      loading: false,

      form: {
        type: '',
        paramName : '',
        paramDisplayName : '',
        paramValue : '',
        paramCustomCol1: '',
        paramCustomVal1: '',
        paramCustomCount1: '',
        paramCustomCol2: '',
        paramCustomVal2: '',
        paramCustomCount2: '',
      },

      rules: {
        paramName: [
          { required: true, message: '请输入参数名称', trigger: 'blur' },
        ],
        paramDisplayName: [
          { required: true, message: '请输入参数显示名称', trigger: 'blur' },
        ],
        paramValue: [
          { required: true, message: '请输入参数值', trigger: 'blur' },
        ],
        type: [
          { required: true, message: '请选择类型', trigger: 'blur' },
        ],
      },

      id  : null,
      data: null,

      customColOptions: [
        { label: 'minutes', value: 'minutes' },
        { label: 'hours', value: 'hours' },
      ],

      paramTypeOptions: [
        {value: 1, label: 'string'},
        {value: 2, label: 'list'},
        {value: 3, label: 'table'},
      ],

      paramNameOptions: [],
    }
  },
  mounted () {
    this.fetchParamNameOptions();
  },

  methods: {

    show (id = null) {

      this.id = id;

      if (this.id) {
        this.fetchData();
      }
      else {
        this.reset();
      }

      this.dialogVisible = true;
    },

    close () {
      this.dialogVisible = false;
      this.$emit('dialog-close');
    },

    async fetchParamNameOptions () {
      this.paramNameOptions = await ApiMain.paramOption();
    },

    reset () {
      this.form = {
        type: '',
        paramName : '',
        paramDisplayName : '',
        paramValue : '',
        paramCustomCol1: '',
        paramCustomVal1: '',
        paramCustomCount1: '',
        paramCustomCol2: '',
        paramCustomVal2: '',
        paramCustomCount2: '',
      };
    },

    fetchData () {

      ApiMain.info({id: this.id})
      .then(re => {
        this.data = re; 
      })
      .catch(() => {
        this.data = null;
      })
      .finally(() => {
        this.renderData();
      });
    },

    renderData () {
      this.form.type = this.data.type;
      this.form.paramName = this.data.paramName;
      this.form.paramDisplayName = this.data.paramDisplayName;
      this.form.paramValue = this.data.paramValue;
      if (this.form.type == 3 || this.form.type == 4) {
        let tmp = JSON.parse(this.form.paramValue)
        let len = tmp.length, k = 0
        for (var i in tmp) {
          if (k == 0) {
            this.form.paramCustomCol1 = tmp[i].type
            this.form.paramCustomVal1 = tmp[i].times
            this.form.paramCustomCount1 = tmp[i].count
          } else {
            this.form.paramCustomCol2 = tmp[i].type
            this.form.paramCustomVal2 = tmp[i].times
            this.form.paramCustomCount2 = tmp[i].count
          }
          k++
        }
      }
    },

    verifyForm () {
      var bool = true;
      this.$refs['main-form'].validate((valid) => bool = valid);
      return bool;
    },

    async submit () {

      if (! this.verifyForm()) return false;

      if (this.form.type == 3 || this.form.type == 4) {
        if (!this.form.paramCustomCol1 || !this.form.paramCustomVal1 || !this.form.paramCustomCount1 || !this.form.paramCustomCol2 || !this.form.paramCustomVal2 || !this.form.paramCustomCount2) {
          this.$message.error('请先写自定义参数值')
          return
        }
        let tmp = []
        tmp.push({ type: this.form.paramCustomCol1, times: this.form.paramCustomVal1, count: this.form.paramCustomCount1 })
        tmp.push({ type: this.form.paramCustomCol2, times: this.form.paramCustomVal2, count: this.form.paramCustomCount2 })
        this.form.paramValue = JSON.stringify(tmp)
      }

      this.loading = true;

      try {
        if (this.id) {
          await this.submitSet();
        }
        else {
          await this.submitAdd();
        }
      } finally {
        this.loading = false;
      }
    },

    async submitDel() {

      this.popDeleteVisible = false;
      this.loading = true;
      try {
        await ApiMain.del({id: this.id});

        this.loading = false;
        this.close();
        this.$message({message: '删除成功', type: 'success'});
      } catch (e) {
        this.loading = false;        
      }
      
    },

    async submitSet () {

      this.form.id = this.id;
      await ApiMain.set(this.form);
      this.$message({message: '修改成功', type: 'success'});
      this.close();

    },

    async submitAdd () {

      await ApiMain.add(this.form);
      this.$message({message: '添加成功', type: 'success'});
      this.close();
    },
  }
}
</script>

<style>

</style>
